<template>
	<view > 	    
		 <!-- 顶部选项卡 -->
		 <scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation
		 class="scroll-row border-bottom border-light-secondary" style="height: 101rpx;">
		 	<view v-for="(item,index) in tabBars" :key="index" 
		 	class="scroll-row-item px-3 py-2 font-small" :id="'tab'+index"
		 	:class="tabIndex === index?'text-main font-md font-weight-bold':''"
		 	@click="changeTab(index)">{{item.name}}</view>
		 </scroll-view>
		 			
		<swiper :duration="150" :current="tabIndex" @change="onChangetab"  :style="'height:'+ scrollH+'px;'">
			<swiper-item v-for="(item , index) in newslist" :key="index" >
				<scroll-view scroll-y="true" :style="'height:'+ scrollH+'px;'" @scrolltolower="loadmore(index)" >
					
				<template v-if = "item.list.length > 0" >
					<block v-for="(item2 , index2) in item.list" :key='index2'>
					 <commonList :item="item2" :index="index2"  @follow = "follow" ></commonList>
					<divider></divider>
					</block> 
					<!-- 上拉加载 -->
			  <load-more :loadmore ="item.loadmore" ></load-more>
				 </template>
				 
				 <template v-else >
                     <no-thing></no-thing>
				 </template>	 		 
				</scroll-view>				
			</swiper-item>
		</swiper> 
			
	</view>
</template>

<script>
	const demo =[{
				userpic:'/static/default.jpg',
		    	 username:'昵称',
						  usertime:'2019-10-20 下午04:30',
						  isFollow:false,
						  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
						  txt_pic:'/static/demo/datapic/11.jpg',
						  support:{
							  type:"support",
							  support_count:1,
							  unsupport_count:2
						  },
						  comment_count:2,
						  share_num:3
							    	
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
														  type:"support",
														  support_count:1,
														  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
														  type:"support",
														  support_count:1,
														  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
														  type:"support",
														  support_count:1,
														  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						}]
	import commonList from "@/components/common/common_list.vue"
    import loadMore from "@/components/common/load_more.vue"
	export default {
		components:{
			commonList,
			loadMore		
		},
		data() {
			return {
				//列表高度
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars: [{
				    name: '关注',
				}, {
				    name: '推荐',
				}, {
				    name: '体育',
				}, {
				    name: '热点',
				}, {
				    name: '财经',
				}, {
				    name: '娱乐',
				}, {
				    name: '军事',
				}, {
				    name: '历史',
				}, {
				    name: '本地',
				}],
				newslist:[ ]
			}
		},
		onLoad() {
          let res = uni.getSystemInfo({
          	success:res=>{
				//px
			 this.scrollH =	res.windowHeight - uni.upx2px(100)
			}
          })
		  //根据选项生成列表
		  this.getData()
		  
		},
		methods: {
			//关注
			follow(e){
				this.list[e].isFollow = true
				uni.showToast({ title: '关注成功' });				
				
			},
			//监听按钮点击事件
			onNavigationBarButtonTap(){
				uni.navigateTo({
					url:'../upload/upload'
				})
			},
			
			
			//获取数据
			getData(){
				let arr = []
				for(let i = 0 ; i< this.tabBars.length;i++){
					//生成列表模板
					let obj = {
						//1.上拉加载更多  2.加载中。。 3.没有更多了
						loadmore:"上拉加载更多",
						list:[]
					}
					if (i < 3){
						obj.list = demo
					}
					arr.push(obj)
				}
				  this.newslist = arr
				
			},
			//监听滑动
			onChangetab(e){
				this.changeTab(e.detail.current)
			},
			
           // 切换选项
           changeTab(index){
           	if (this.tabIndex === index) {
           		return;
           	}
           	this.tabIndex = index
           	// 滚动到指定元素
           	this.scrollInto = 'tab'+index
           },
		   //上拉加载更多
		   loadmore(index){			 
			   //先拿到当前列表
			   let item = this.newslist[index]
			   if (item.loadmore !== '上拉加载更多') return;
			  /* 修改当前列表加载状态 */
			  item.loadmore='加载中...'
			   setTimeout(() =>{
				   //加载数据
				   item.list = [...item.list,...item.list]
				   //恢复加载状态
				  item.loadmore = '上拉加载更多'
			   },10000)
		   }
		   
		}
	}
</script>

<style>
	
</style>
